<!-- 用户重置密码 -->
<script setup>
import pageComponent from '@/components/pageComponent.vue'
import { ref } from 'vue'
import { userUpdataPwdService } from '@/api/user.js'
const ResFormData = ref({
  old_pwd: '',
  new_pwd: '',
  re_pwd: ''
})
const formData = ref({
  ...ResFormData.value
})

//注册确认密码校验函数
const rePassWordModel = (
  rule,
  value,
  callback
) => {
  if (formData.value.new_pwd !== value) {
    callback(new Error('两次输入的密码不一致！'))
  }
  callback()
}
//新密码不能和老密码一样
const oldNewPwd = (rule, value, callback) => {
  if (formData.value.old_pwd === value) {
    callback(
      new Error('新密码不能和老密码一致！')
    )
  }
  callback()
}

const rule = {
  old_pwd: [
    {
      required: true,
      message: '请输入密码！',
      trigger: 'blur'
    },
    {
      pattern: /^\S{6,15}$/,
      message: '密码为6——15位非空字符！',
      trigger: 'blur'
    }
  ],
  new_pwd: [
    {
      required: true,
      message: '请输入密码！',
      trigger: 'blur'
    },
    {
      pattern: /^\S{6,15}$/,
      message: '密码为6——15位非空字符！',
      trigger: 'blur'
    },
    { validator: oldNewPwd, trigger: 'blur' }
  ],
  re_pwd: [
    {
      required: true,
      message: '请输入密码！',
      trigger: 'blur'
    },
    {
      pattern: /^\S{6,15}$/,
      message: '密码为6——15位非空字符！',
      trigger: 'blur'
    },
    {
      validator: rePassWordModel,
      trigger: 'blur'
    }
  ]
}

//重置密码
const resetPwd = () => {
  formData.value = ResFormData.value
}

//修改密码
const updataPwd = async () => {
  console.log(formData.value)
  await userUpdataPwdService(formData.value)
  ElMessage.success('修改成功！')
}
</script>

<template>
  <pageComponent title="重置密码">
    <el-form
      :model="formData"
      :rules="rule"
      class="form"
    >
      <el-form-item label="原密码" prop="old_pwd">
        <el-input
          v-model="formData.old_pwd"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="new_pwd">
        <el-input
          v-model="formData.new_pwd"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="确认新密码"
        prop="re_pwd"
      >
        <el-input
          v-model="formData.re_pwd"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      class="button"
      @click="updataPwd"
    >
      修改密码
    </el-button>
    <el-button class="button" @click="resetPwd">
      重置
    </el-button>
  </pageComponent>
</template>

<style scoped></style>
